<template>
  <div class="main-div">
    <div class="main-search-div">
      <el-form ref="searchRef"
               :model="searchItem"
               status-icon
               inline>
        <el-form-item label="所属模块" prop="moduleId" class="main-search-item-3">
          <el-select v-model="searchItem.moduleId" placeholder="请选择" :clearable="true">
            <el-option v-for="item in moduleData" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="参数标识" prop="tagId" class="main-search-item-3">
          <el-select v-model="searchItem.tagId" placeholder="请选择" :clearable="true" @focus="initTagData"
                     :filterable="true" @change="search">
            <el-option v-for="item in tagData" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="参数名称" prop="paramName" class="main-search-item-3">
          <el-input v-model="searchItem.paramName" type="text"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" :loading="searchLoading">查询</el-button>
          <el-button @click="reset(searchRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-button-div">
      <el-button type="primary" @click="addParamFn">新增</el-button>
      <el-button type="primary" @click="addTagFn">新增标识</el-button>
      <el-button type="primary" @click="editTagFn">编辑标识</el-button>
      <el-popconfirm title="是否删除?" @confirm="delParamInfoFn">
        <template #reference>
          <el-button type="danger">删除</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="是否删除?" @confirm="delParamTagFn">
        <template #reference>
          <el-button type="danger">删除标识</el-button>
        </template>
      </el-popconfirm>
    </div>
    <div class="main-table-div">
      <common-page-table
          :data="tableData"
          :columns="columns"
          :pagination="pagination"
          :show-border="true"
          :need-one-select="true"
          :show-no="true"
          :loading="tableLoading"
          :show-action="true"
          :action-config="actionConfig"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
          @handle-current-change="handleTableCurrentChange"
      >
        <template #action="{row}">
          <el-button type="primary" size="small" round @click="editFn(row)">编辑</el-button>
        </template>
      </common-page-table>
    </div>
  </div>

  <tag-save-dialog
      :show-dialog="tagSaveItem.showDialog"
      :title="tagSaveItem.title"
      :dialog-type="tagSaveItem.dialogType"
      :dialog-param="tagSaveItem.dialogParam"
      @handle-close-dialog="handleCloseTagSaveDialog($event)"
  ></tag-save-dialog>

  <param-info-save-dialog
      :show-dialog="paramSaveItem.showDialog"
      :title="paramSaveItem.title"
      :dialog-type="paramSaveItem.dialogType"
      :dialog-param="paramSaveItem.dialogParam"
      @handle-close-dialog="handleCloseParamSaveDialog($event)"
      @handle-closed-dialog="handleClosedParamSaveDialog($event)"
  ></param-info-save-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import type {FormInstance} from "element-plus";
import {dictDataUtil} from "@/utils/common-request.ts";
import {SYSTEM_MODULE} from "@/constants/dict-constants.ts";
import {
  delParamInfoItemReq,
  delTagItemReq, getOneParamTagItemReq,
  getParamInfoListReq,
  getTagDropDownReq
} from "@/api/admin/param.ts";
import {checkIsNull} from "@/utils/check-utils.ts";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";
import CommonPageTable from "@/components/common/CommonPageTable.vue";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import TagSaveDialog from "@/components/manager/param/TagSaveDialog.vue";
import {DIALOG_ADD, DIALOG_EDIT} from "@/constants/common-constant.ts";
import ParamInfoSaveDialog from "@/components/manager/param/ParamInfoSaveDialog.vue";

interface SearchItem {
  moduleId: string;
  tagId: string;
  paramName: string;
}
const searchItem = reactive<SearchItem>({
  moduleId: '',
  tagId: '',
  paramName: ''
})

interface TagSaveItem {
  showDialog: boolean;
  title: string;
  dialogType: string;
  dialogParam: any;
}
const tagSaveItem = reactive<TagSaveItem>({
  showDialog: false,
  title: '',
  dialogType: '',
  dialogParam: {}
})

interface ParamSaveItem {
  showDialog: boolean;
  title: string;
  dialogType: string;
  dialogParam: any;
}
const paramSaveItem = reactive<ParamSaveItem>({
  showDialog: false,
  title: '',
  dialogType: '',
  dialogParam: {}
})


const searchRef = ref<FormInstance>()
const searchLoading = ref<boolean>(false)
const search = async () => {
  searchList().then()
}

const searchList = async () => {
  searchLoading.value = true
  const params = {
    tagId: searchItem.tagId,
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize
  }
  const res: any = await getParamInfoListReq(params)
  searchLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS) {
    tableData.value = res.data.rows;
    pagination.total = res.data.total
  }
  searchLoading.value = false
}

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const moduleData = ref<any>([])
const tagData = ref<any>([])

const initModuleData = async () => {
  moduleData.value = await dictDataUtil(SYSTEM_MODULE)
}

const initTagData = async () => {
  const moduleId = searchItem.moduleId;

  if (checkIsNull(moduleId)) {
    warningMessageTip("请先选择模块信息")
    return;
  }

  const params = {
    moduleId: moduleId
  }
  const res: any = await getTagDropDownReq(params)
  tagData.value = res.data
}

const tableData = ref<any[]>([])
const columns = [
  {prop: 'tagKey', label: '标识key', width: 'auto', fixed: 'left'},
  {prop: 'tagName', label: '标识名称', width: 'auto', fixed: 'left'},
  {prop: 'paramKey', label: '参数key', width: 'auto', fixed: 'left'},
  {prop: 'paramName', label: '参数名称', width: 'auto', fixed: 'left'},
  {prop: 'paramTypeLabel', label: '参数类型', width: 'auto', fixed: 'left'},
  {prop: 'paramValue', label: '参数值', width: 'auto', fixed: 'left'}
]
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)
const pagination = reactive({
  currentPage: currentPage.value,
  pageSize: pageSize.value,
  total: total.value
})
const tableLoading = ref<boolean>(false)
const actionConfig = {
  prop: 'action',
  label: '操作',
  width: 'auto',
}

const currentRow = ref()
const sizeChange = (val: number) => {
  pageSize.value = val;
  pagination.pageSize = val;

  searchList().then();
}

const currentChange = (val: number) => {
  currentPage.value = val;
  pagination.currentPage = val;

  searchList().then();
}
const handleTableCurrentChange = (row: any) => {
  currentRow.value = row
}
const delParamInfoFn = async () => {
  if (checkIsNull(currentRow.value)) {
    warningMessageTip("请先选择要删除的参数")
    return;
  }
  const params = {
    id: currentRow.value.id
  }
  const res: any = await delParamInfoItemReq(params)
  elMessageTip(res.tipType, res.message)
  if (res.code === RESPONSE_CODE_SUCCESS) {
    searchList().then()
  }
}

const delParamTagFn = async () => {
  if (checkIsNull(searchItem.tagId)) {
    warningMessageTip("请先选择要删除的标识")
    return;
  }
  const params = {
      id: searchItem.tagId
  }
  const res: any = await delTagItemReq(params)
  elMessageTip(res.tipType, res.message)
  if (res.code === RESPONSE_CODE_SUCCESS) {
    searchItem.tagId = ''
    searchList().then()
  }
}

const editFn = (row: any) => {
  paramSaveItem.showDialog = true
  paramSaveItem.title = '编辑参数'
  paramSaveItem.dialogParam = row
  paramSaveItem.dialogType = DIALOG_EDIT
}

const handleCloseTagSaveDialog = (val: boolean) => {
  tagSaveItem.showDialog = val
}
const handleCloseParamSaveDialog = (val: boolean) => {
  paramSaveItem.showDialog = val
}
const handleClosedParamSaveDialog = (val: boolean) => {
  paramSaveItem.showDialog = val
  search().then()
}

const addTagFn = () => {
  tagSaveItem.showDialog = true
  tagSaveItem.title = '新增标识'
  tagSaveItem.dialogParam = {}
  tagSaveItem.dialogType = DIALOG_ADD
}

const editTagFn = () => {
  tagSaveItem.showDialog = true
  tagSaveItem.title = '编辑标识'
  tagSaveItem.dialogParam = {
    id: searchItem.tagId
  }
  tagSaveItem.dialogType = DIALOG_EDIT
}

const addParamFn = async () => {
  if (checkIsNull(searchItem.tagId)) {
    warningMessageTip("请先选择标识")
    return
  }

  paramSaveItem.showDialog = true
  paramSaveItem.title = '新增参数'
  const params = {
    id: searchItem.tagId
  }
  const res:any = await getOneParamTagItemReq(params)
  paramSaveItem.dialogParam = {
    tagId: res.data.id,
    tagKey: res.data.tagKey,
    tagName: res.data.tagName
  }
  paramSaveItem.dialogType = DIALOG_ADD
}

onMounted(async () => {
  initModuleData().then()
})

</script>

<style scoped>

</style>